import 'package:flutter/material.dart';

class CustomNavBar extends StatefulWidget {
  ///所有的底部item
  final List<CustomBottomNavItem> items;

  ///选中时的文本样式
  final TextStyle? selectedStyle;

  ///未选中时的文本样式
  final TextStyle? unselectedStyle;

  ///tab的点击
  final ValueChanged<int>? onTap;

  ///底部bar的整体高度
  final double? height;

  ///底部bar的背景
  final Color? bgColor;

  CustomNavBar(
      {Key? key,
      required this.items,
      this.selectedStyle,
      this.unselectedStyle,
      this.height,
      this.bgColor,
      this.onTap})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return CustomNavBarStatus();
  }
}

class CustomNavBarStatus extends State<CustomNavBar> {
  static GlobalKey barKey = GlobalKey();

  static currentInstance() {
    State<CustomNavBar>? state =
        CustomNavBarStatus.barKey.currentContext?.findAncestorStateOfType();
    return state;
  }

  setCurrentIndex(int index) {
    currentIndex.value = index;
  }

  ValueNotifier<int> currentIndex = ValueNotifier<int>(0);

  @override
  void initState() {
    super.initState();
    setCurrentIndex(0);
    refreshChild();
  }

  void refreshChild() {
    for (int i = 0; i < widget.items.length; i++) {
      widget.items[i].index = i;
    }
  }

  @override
  Widget build(BuildContext context) {
    debugPrint("CustomNavBarStatus build currentIndex=$currentIndex");
    return Container(
      key: barKey,
      height: widget.height,
      color: widget.bgColor,
      child: widget.items != null && widget.items.length > 0
          ? ValueListenableBuilder(
              valueListenable: currentIndex, builder: buildChildren)
          : Container(),
    );
  }

  Widget buildChild(CustomBottomNavItem item, int value) {
    return GestureDetector(
      onTap: () {
        if (widget.onTap != null) widget.onTap!(item.index);
        currentIndex.value = item.index;
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // item.index == value
          //     ? item.activeLabel == null
          //         ? item.label
          //         : item.activeLabel
          //     : item.label,
          Text(
            item.title,
            style: item.index == currentIndex.value
                ? item.selectedStyle
                : item.unselectedStyle,
          ),
        ],
      ),
    );
  }

  Widget buildChildren(BuildContext context, int value, Widget? child) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: widget.items.map((item) => buildChild(item, value)).toList(),
    );
  }
}

class CustomBottomNavItem {
  ///图片下的标题
  final String title;

  ///显示的图片或者是自定义的widget(未选中)
  final Widget? label;

  ///显示的图片或者是自定义的widget（选中）
  final Widget? activeLabel;

  ///文本样式（选中）
  final TextStyle? selectedStyle;

  ///文本样式（未选中）
  final TextStyle? unselectedStyle;

  ///当前item在整个itemBar中的位置
  int index = 0;

  CustomBottomNavItem(
      {Key? key,
      required this.title,
      this.label,
      this.selectedStyle,
      this.unselectedStyle,
      this.index = 0, this.activeLabel});
}
